iT邦幫忙

2023 iThome 鐵人賽

DAY 10
0
Modern Web

30天前端學習筆記心得系列 第 10

Day10-Html語意標籤

  • 分享至 

  • xImage
  •  

讓網路瀏覽器搜尋了解網頁中每個區塊的設計

<header> 標題標籤
<nav> 導航標籤
<main> 主要內容標籤
<aside> 側欄標籤
<article> 文章標籤
<section> 區塊標籤
<footer> 頁尾標籤
https://ithelp.ithome.com.tw/upload/images/20230925/20163257mf4eSae8T4.png
       <center>(圖片:自己做的)

<main>

放網頁主要內容,例如:導覽列、側邊欄、文章、頁尾等等

<section>

網頁引用的群組區塊,通常也會使用<h1><h6> 標籤,提供清晰內容組織,也可以用在其他語意標籤中,提供更複雜內容結構,例如導覽航、主要內容、側邊欄等等

<article>

重複使用的內容項目標籤,可以用在部落格、新聞和雜誌文章、論壇回覆、評論等等

<aside>

跟主內容沒有直接關聯的內容,例如:廣告、腳注、插圖等等

<article> <section> <aside>區別

標籤 區塊 h1~h6標題
<article> 重複使用內容 會使用一個標題
<aside> 無直接關聯內容 會使用一個標題
<section> 一般性內容 不一定

<div>

通用區塊標籤,可以建立任何類型的區塊,例如:段落、表格、圖像、按鈕等等,通常在CSS排版或 JavaScript事件處理,常常和CSS一起使用,設計不同排版效果

<span>

用在文字或其他元素組合在一起,搭配IDCLASS屬性在裡面設定不同內容樣式,也沒有任何語意信息

<footer>

網頁或區塊結尾,通常包含版權信息、作者信息、聯繫信息等等

Html語法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
      <div class="logo">
        <h1>Coffee</h1>
      </div>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Content</a></li>
          <li><a href="#">Message</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section class="backImage">
        <div class="filter"></div>
        <h1>Do you want to drink Coffee?</h1>
      </section>
    </main>

    <footer>
      <div class="logo">
        <img src="./coffee.png" alt="Logo" />
        <h1>By Cindy</h1>
      </div>
    </footer>
    
</body>
</html>

https://ithelp.ithome.com.tw/upload/images/20230925/20163257SMw6znpD33.jpg

資料來源:Html語意結構區塊
圖片來源:咖啡Icon


上一篇
Day9-Html項目列表清單
下一篇
Day11-Html表格
系列文
30天前端學習筆記心得34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言